import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, Animated, TouchableOpacity, findNodeHandle, UIManager, Platform, Dimensions } from 'react-native';
import { GLOBAL } from '../../../../../config/global';
const scale = GLOBAL.SCALE;
export class BockCpt extends Component {
    constructor(props) {
        super(props);
        let { visible } = props.data || {};
        const { ChangeVisible } = props
        if (ChangeVisible) {
            ChangeVisible(this.ChangeVisible)
        }
        this.state = {
            isHeight: visible,
            startHeight: 50,
            imgObj: new Animated.Value(visible ? 0 : 1),
        }
        this.num = 0
        this.onOff = true;
    }
    ChangeVisible = (val) => {
        this.setState({
            isHeight: false
        }, () => {
            setTimeout(() => {
                this._startAnimated()
            }, 300)
        })
    }
    componentDidMount = () => {
    }

    // 动画
    _startAnimated = () => {
        let { isHeight, startHeight, heightObj, imgObj } = this.state;
        if (!heightObj) {
            isHeight = true
        }
        if (isHeight) {
            if (!heightObj) {
                this.setState({
                    heightObj: new Animated.Value(startHeight),
                }, () => {
                    Animated.timing(imgObj, { toValue: 1, duration: 200, }).start()
                    Animated.timing(this.state.heightObj, { toValue: 0, duration: 300, }).start(() => { this.setState({ isHeight: 0 }) });
                })
            }
            else {
                Animated.timing(imgObj, { toValue: 1, duration: 200, }).start()
                Animated.timing(heightObj, { toValue: 0, duration: 300, }).start(() => { this.setState({ isHeight: 0 }) });
            }

        } else {
            if (!heightObj) {
                this.setState({
                    heightObj: new Animated.Value(0),
                }, () => {
                    Animated.timing(imgObj, { toValue: 0, duration: 200, }).start()
                    Animated.timing(this.state.heightObj, { toValue: startHeight, duration: 300 }).start(() => { this.setState({ isHeight: true }) })
                })
            }
            else {
                Animated.timing(imgObj, { toValue: 0, duration: 200, }).start()
                Animated.timing(heightObj, { toValue: startHeight, duration: 300 }).start(() => { this.setState({ isHeight: true }) })
            }
        }
    }

    _onLayout = (event) => {
        const dimen = Dimensions.get('window');
        let startHeight = 0;
        startHeight = event.nativeEvent.layout.height;
        this.num++
        let { title } = this.props.data || {};
        let a = this.num
        //针对ip8 plus做适配
        if (Platform.OS === 'ios' && dimen.height == 736 && dimen.width == 414 && title === '运输信息') {
            if (this.num === 4 && this.onOff)
                this.setState({
                    startHeight,
                    heightObj: new Animated.Value(this.props.data.visible ? startHeight : 0),
                })
            this.onOff = false
        }
        else if (this.num === 2 && this.onOff) {
            this.setState({
                startHeight,
                heightObj: new Animated.Value(this.props.data.visible ? startHeight : 0),
            })
            this.onOff = false
        }

    }



    render() {
        let { data, renderView } = this.props || {};
        let { title } = data || {};
        let titleImgObj = require('../../../../../imgs/global/down.png');
        let { heightObj, imgObj } = this.state;

        const spin = imgObj.interpolate({
            inputRange: [0, 1],//输入值
            outputRange: ['0deg', '-90deg'] //输出值
        })
        return (
            <View style={styles.block}>
                <TouchableOpacity activeOpacity={1} onPress={this._startAnimated} style={styles.row}>
                    <Text style={styles.fontTitle}>{title}</Text>
                    <View style={styles.imgBox}>
                        <Animated.Image style={[styles.imgStyle, { transform: [{ rotate: spin }] }]} source={titleImgObj}></Animated.Image>
                    </View>
                </TouchableOpacity>
                <Animated.View style={{ height: heightObj, overflow: 'hidden' }}>
                    <View onLayout={(event) => this._onLayout(event)} style={styles.body}>
                        {renderView()}
                    </View>
                </Animated.View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    imgBox: {
        paddingTop: 5 * scale,
        paddingBottom: 5 * scale,
        paddingLeft: 5 * scale,
        paddingRight: 5 * scale
    },
    imgStyle: {
        width: 10 * scale,
        height: 6 * scale
    },
    body: {
        paddingTop: 10 * scale,
        minHeight: 40 * scale,
        paddingBottom: 10 * scale,
        borderTopWidth: 1,
        borderTopColor: '#E3E7F0',
    },
    block: {
        backgroundColor: '#fff',
        marginBottom: 12 * scale,
        marginHorizontal: 12 * scale,
        borderRadius: 4 * scale,
        paddingTop: 12 * scale,
    },
    row: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: 'center',
        paddingHorizontal: 12,
        paddingBottom: 10
    },
    fontTitle: {
        fontSize: 15 * scale,
        fontWeight: 'bold',
        color: '#000'
    },
})